<template>
    <div class="h-full w-full">
        <div id="faxqtarget" class="w-full h-full"></div>
    </div>
</template>

<script setup lang="ts">
import * as echarts from 'echarts'
import { onMounted, watch } from 'vue';
import type { FaAnXiaQu } from "@/apis/homeApi";

const props = defineProps({
    data:{
        type: Object as ()=> FaAnXiaQu,
        require:true,
    }
})

//初始化ecahrts实例

let xsChart:echarts.ECharts
onMounted(() => {
    xsChart = echarts.init(document.getElementById('faxqtarget') as HTMLDivElement)
    renderChart()
})
//构建option配置对象
const renderChart = () => { 
  const xsoption = {
    title: {
      text: '各中心所发案情况',
      subtext: '',
      left: 'center',
      textStyle:{
            color:'#fff'
          }
    },
    xAxis: {
      type: 'category',
      data: props.data!.XiaQuFenZu,
      axisLabel: {
        rotate: 60,
        color:'#9eb1c8'
      },
      axisLine:{
        show:true,
      },
      axisTick:{
        show:false,
      },
    },
    yAxis: {
      type: 'value',
      max: function (value: { max: number, min: number }) {
        return value.max * 1.5
      },
      axisLine:{
        show:false,
      },
      axisTick:{
        show:false,
      },
      axisLabel:{
        show:false,
      },
      splitLine:{
        show:false
      }
    },
    //图标的位置
    grid:{
      top:0,
      right:0,
      bottom:0,
      left:50,
      containLabel:true,
    },
    //核心配置
    series: [
      {
        data: props.data!.XiaQuShuJu,
        type: 'bar',
        //字体
        label: {
          show: true,
          position: 'top',
          color:'#fff'
        },
        //showBackground:true,
        // backgroundStyle:{
        //   color:'rgba(180,180,180,0.2)'
        // },
        //每个柱子的样式
        itemStyle:{
          color:'#5D98CE',
          borderRadius:5,
          shadowColor:'rgba(0,0,0,0.3)',
          shadowBlur:5
        },
        barWidth:'50%',
      }
    ]
  }
  //3.通过实例填充图标
  xsChart.setOption(xsoption)
}
//检测来自父组件的数据变化更新图标
watch(() => props.data,() => {
  xsChart.clear()
  renderChart()
})

</script>

<style scoped>

</style>